<script>
import DefaultHeader from '@/portal4.1/pc/component/query/header/DefaultQueryHeader.vue'
import DefaultAffix from '@/portal4.1/pc/component/affix/DefaultAffix.vue'
import DefaultFooter from '@/portal4.1/pc/component/footer/DefaultFooter.vue'
import { layout } from '@/mixins/layout'
import { query } from '@/mixins/common'
export default {
  name: 'PcDefaultIndex',
  components: { DefaultHeader, DefaultAffix, DefaultFooter },
  mixins: [layout, query]
}
</script>
<template>
  <div :style="{ fontSize: layoutTheme.fontSize, color: layoutTheme.color }">
    <!--  页头部分  -->
    <div class="custom-layout-header">
      <default-header @queryObject="queryServer" />
    </div>
    <!--  内容部分   -->
    <div class="custom-layout-content" :style="ContentBack">
      <div class="content-body">
        <div class="query-body" :style="contentStyle">
          <el-empty v-if="dataList === null || dataList.length === 0" :image-size="200" />
          <div v-else class="server-body">
            <div
              v-for="(item, index) in dataList"
              :key="'server-li-' + index"
              class="content-ul"
            >
              <div class="content-query">
                <div class="content-query-title" :style="headerBorder">
                  {{ item.bmmc }}
                </div>
              </div>
              <div class="content-server">
                <div
                  v-for="(obj, indexService) in item.dataList"
                  :key="'server-' + indexService"
                  class="custom-right-li"
                  @click="openEntity(obj)"
                >
                  <el-card
                    shadow="hover"
                    style="height: 100%"
                  >
                    <div class="right-li-body">
                      <div class="custom-li-image">
                        <el-image
                          lazy
                          class="custom-image"
                          :src="baseURL+obj.pcIcon"
                        />
                      </div>
                      <div class="custom-li-title">
                        <div class="li-line">{{ obj.name }}</div>
                        <div class="li-line custom-font">
                          {{ obj.ssxtmc + " / " + obj.blfsmc }}
                        </div>
                      </div>
                      <div class="custom-li-button">
                        <i class="el-icon-video-play" />
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  页脚部分内容  -->
    <div class="custom-layout-footer">
      <default-footer />
    </div>
    <!-- 固定显示项 -->
    <div class="custom-layout-affix" :style="{ backgroundColor: layoutTheme.backgroundColor}">
      <default-affix />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.custom-layout-header {
  height: 300px;
  width: 100%;
}
.custom-layout-content {
  width: 100%;
  min-height: calc(100vh - 240px);
}
.custom-layout-affix {
  width: 66px;
  position: fixed;
  top: 250px;
  right: 8px;
  z-index: 1;
  min-height: 66px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.custom-layout-footer {
  width: 100%;
  height: 170px;
}
.content-body {
  min-width: 75rem;
  padding: 0 calc(50% - 40.8rem);
  position: relative;
  min-height: 672px;
  height: auto;
  .query-body {
    width: 100%;
    min-height: 672px;
    background-color: var(--background-color);
    .server-body {
      width: 100%;
      height: auto;
      .content-ul {
        width: 100%;
        min-height: 200px;
        display: flex;
        flex-flow: column nowrap;
        .content-query {
          width: 100%;
          height: 45px;
          line-height: 45px;
          position: relative;
          padding: 0 20px;
          box-sizing: border-box;
          .content-query-title {
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            font-weight: bolder;
            text-align: left;
            border-bottom: 1px solid #eeeeee;
            text-indent: 20px;
            .title-i {
              font-size: 0.9rem;
              color: #909399;
            }
          }
          .content-query-title::before {
            content: " ";
            position: absolute;
            left: 20px;
            top: 10px;
            height: 25px;
            width: 4px;
            border-radius: 2px;
            background-color: var(--active-color);
          }
        }
        .content-server {
          height: inherit;
          width: 100%;
          display: flex;
          flex-flow: row wrap;
          align-content: flex-start;
          .custom-right-li {
            cursor: pointer;
            width: 20%;
            height: 100px;
            align-content: flex-start;
            padding: 10px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
.right-li-body {
  width: 100%;
  height: 70px;
  display: flex;
  flex-flow: row nowrap;
  position: relative;
}
.custom-li-image {
  flex: 0 1 auto;
  width: 60px;
  height: 100%;
  padding: 15px 10px;
  box-sizing: border-box;
}
.el-card ::v-deep .el-card__body {
  padding: 5px;
}
.custom-image {
  width: 40px;
}
.custom-li-title {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
  padding: 5px 0;
  box-sizing: border-box;
}
.custom-font {
  font-size: 0.8rem;
  color: #8c939d;
}
.li-line {
  flex: 0 1 auto;
  height: 50%;
  padding: 5px;
  box-sizing: border-box;
  text-align: left;
}
.custom-li-button {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  right: -5px;
  color: #a8abb2;
  font-size: 1.1rem;
  text-align: center;
  line-height: 40px;
}
</style>
